<template>
  <div class="page-tabbar">
    <div class="page-wrap">

      <!-- tab -->
      <mt-tabbar v-model="selected" fixed  class="nav-tab-list"  v-on:input="onTabInput">
        <mt-tab-item id="tab-door" class="nav-tab-item"   >
          <i  slot="icon"  class="iconfont icon-openDoor-off"></i>
          开门
        </mt-tab-item>
        <mt-tab-item id="tab-order" @click="onTabClick('tab-order')" >
          <i  slot="icon"  class="iconfont icon-order-off"></i>
          预约
        </mt-tab-item>
        <mt-tab-item id="tab-me" @click="onTabClick('tab-me')">
          <i  slot="icon"  class="iconfont icon-me-off"></i>
          我的
        </mt-tab-item>
      </mt-tabbar>

      <!-- 容器 -->
      <tab-container :selected="selected"/>

    </div>
  </div>
</template>
<style lang="scss">
  @import "../css/tab.scss";
</style>
<script>
  import Vue from 'vue';
  import Util from "util";
  import TabContainer from "./TabContainer";

  export default {
    name: 'page-tabbar',
    computed : {
    },

    mounted : function(){
      //获得url参数
      this.selected = Util.Location.getHashParamByName('page') || 'tab-door';

      window.getEventBus().$on("tabSelected",(data)=>{
          this.selected = data;
      });

    },

    beforeDestroy : function(){
        window.getEventBus().$off("tabSelected");
    },

    data(){
      return {
        selected: ''
      }
    },


  methods : {

    onTabInput : function(content){
      console.log(content);
      history.replaceState({},'',"#/tab?page="+content);
    }
   },
    components : {
      TabContainer
    }
  }


</script>
